<template>
  <div class="footer">
    <div class="footer-wrap">
      <div class="footer-left">
        <img src="../assets/logo.png" alt="">
        <p>联系我们</p>
        <span>{{ servicesObj.service_phone }}</span>
        <span>{{ servicesObj.service_email }}</span>
      </div>
      <div class="footer-cent">
        <ul>
            <p>新手指南</p>
            <li><router-link to="/login">注册登录</router-link></li>
            <li><router-link to="/contactUs?id=1">用户协议</router-link></li>
            <li><router-link to="/contactUs?id=2">隐私政策</router-link></li>
        </ul>
        <ul>
            <p>产品及平台</p>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">学校课堂</a></li>
            <li><a href="#">编程工具</a></li>
        </ul>
        <ul>
            <p>关于我们</p>
            <li><router-link to="/contactUs?id=3">常见问题</router-link></li>
            <li><router-link to="/contactUs?id=4">关于平台</router-link></li>
            <li><router-link to="/contactUs?id=5">联系我们</router-link></li>
        </ul>
      </div>
      <div class="footer-right">
        <!-- <div class="online" @click="onlineVisible = true">
            <img src="../assets/icons/online.png" alt="">
            <span>在线客服</span>
        </div> -->
        <div class="erweima">
            <img :src="servicesObj.min_qrcode" alt="">
            <p>平台小程序码</p>
        </div>
      </div>
    </div>
    <div class="footer-copy">
        <p>深圳市中科思达科技有限公司  版权所有  Ⓒ2001—2025  粤ICP备12345678号—88</p>
    </div>
    <OnLine v-if="onlineVisible" @closeChat="closeChat"></OnLine>
  </div>
</template>
<script>
import OnLine from './onLine.vue'
export default {
  name: "Footer",
  components: {
    OnLine
  },

  data() {
    return {
      onlineVisible: false,
      servicesObj: {}
    };
  },
  mounted() {
    this.getSeverces();
  },
  methods: {
    async getSeverces() {
        const res = await this.$request.get('api/index/platform_config');
        if (res.code === 1) {
            this.servicesObj = res.data || {};
        }
    },
    closeChat() {
      this.onlineVisible = false;
    }
  },
};
</script>
<style lang="less" scoped>
.footer {
    width: 100%;
    background: #F5F7FD;
    .footer-wrap {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 65px 0;
        .footer-left {
            text-align: left;
            img {
                width: 167px;
                height: 30px;
            }
            p {
                font-size: 16px;
                color: #000000;
                line-height: 20px;
                font-weight: bold;
                margin: 32px 0;
            }
            span {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 30px;
                display: block;
            }
        }
        .footer-cent {
            display: flex;
            ul {
                margin-right: 100px;
                p {
                    font-size: 14px;
                    font-weight: bold;
                }
                li {
                    margin-top: 10px;
                    list-style: none;
                    a {
                        font-size: 12px;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }
        }
        .footer-right {
            .online{
                width: 102px;
                height: 28px;
                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                border-radius: 6px;
                display: flex;
                justify-content: center;
                line-height: 28px;
                margin-bottom: 16px;
                cursor: pointer;
                img{
                    width: 18px;
                    height: 18px;
                    margin-top: 5px;
                    margin-right: 5px;
                }
                span{
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }
            .erweima{
                img {
                    width: 120px;
                    height: 120px;
                }
                p {
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 20px;
                    margin: 10px 0 5px;
                }
            }
        }
    }
    .footer-copy {
        width: 100%;
        background: #F5F7FD;
        text-align: center;
        padding: 10px 0;
        border-top: 1px solid #d6d6d6;
        p {
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            margin-top: 20px;
        }
    }
}
</style>